@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /*
    默认主题 (蓝色) 和亮色模式的 CSS 变量
    这些变量定义了 UI 库的默认外观。
    子应用可以通过在 HTML 根元素上设置 data-theme="[theme-name]" 或 class="dark" 来切换。
  */
  :root {
    /* Primary Colors (Blue Theme - Default) */
    --color-primary-50: 239 246 255; /* blue-50 */
    --color-primary-100: 219 234 254; /* blue-100 */
    --color-primary-200: 191 219 254; /* blue-200 */
    --color-primary-300: 147 197 253; /* blue-300 */
    --color-primary-400: 96 165 250; /* blue-400 */
    --color-primary-500: 59 130 246; /* blue-500 */
    --color-primary-600: 37 99 235; /* blue-600 */
    --color-primary-700: 29 78 216; /* blue-700 */
    --color-primary-800: 30 64 175; /* blue-800 */
    --color-primary-900: 30 58 138; /* blue-900 */
    --color-primary-950: 23 37 84; /* blue-950 */

    /* Secondary Colors (Default Gray) */
    --color-secondary-50: 248 250 252; /* slate-50 */
    --color-secondary-100: 241 245 249; /* slate-100 */
    --color-secondary-200: 226 232 240; /* slate-200 */
    --color-secondary-300: 203 213 225; /* slate-300 */
    --color-secondary-400: 148 163 184; /* slate-400 */
    --color-secondary-500: 100 116 139; /* slate-500 */
    --color-secondary-600: 71 85 105; /* slate-600 */
    --color-secondary-700: 51 65 85; /* slate-700 */
    --color-secondary-800: 30 41 59; /* slate-800 */
    --color-secondary-900: 15 23 42; /* slate-900 */
    --color-secondary-950: 2 6 23; /* slate-950 */

    /* Gray Scale (Default Light Mode) */
    --color-gray-50: 249 250 251; /* gray-50 */
    --color-gray-100: 243 244 246; /* gray-100 */
    --color-gray-200: 229 231 235; /* gray-200 */
    --color-gray-300: 209 213 219; /* gray-300 */
    --color-gray-400: 156 163 175; /* gray-400 */
    --color-gray-500: 107 114 128; /* gray-500 */
    --color-gray-600: 75 85 99; /* gray-600 */
    --color-gray-700: 55 65 81; /* gray-700 */
    --color-gray-800: 31 41 55; /* gray-800 */
    --color-gray-900: 17 24 39; /* gray-900 */
    --color-gray-950: 3 7 18; /* gray-950 */

    /* Semantic Colors (Default Light Mode) */
    --color-success-DEFAULT: 16 185 129; /* green-500 */
    --color-success-light: 209 250 229; /* green-100 */
    --color-success-dark: 6 95 70; /* green-900 */

    --color-warning-DEFAULT: 245 158 11; /* amber-500 */
    --color-warning-light: 254 243 199; /* amber-100 */
    --color-warning-dark: 146 64 14; /* amber-900 */

    --color-error-DEFAULT: 239 68 68; /* red-500 */
    --color-error-light: 254 226 226; /* red-100 */
    --color-error-dark: 153 27 27; /* red-900 */

    --color-info-DEFAULT: 59 130 246; /* blue-500 */
    --color-info-light: 219 234 254; /* blue-100 */
    --color-info-dark: 30 64 175; /* blue-900 */

    /* 其他 Design Tokens 的 CSS 变量 (与 tailwind.config.js 保持一致) */
    /* 例如：字体大小、行高、间距、圆角、阴影等 */
    --font-size-xs: 0.75rem;
    --line-height-xs: 1rem;
    --font-size-sm: 0.875rem;
    --line-height-sm: 1.25rem;
    --font-size-base: 1rem;
    --line-height-base: 1.5rem;
    --font-size-lg: 1.125rem;
    --line-height-lg: 1.75rem;
    --font-size-xl: 1.25rem;
    --line-height-xl: 1.75rem;
    --font-size-2xl: 1.5rem;
    --line-height-2xl: 2rem;
    --font-size-3xl: 1.875rem;
    --line-height-3xl: 2.25rem;
    --font-size-4xl: 2.25rem;
    --line-height-4xl: 2.5rem;
    --font-size-5xl: 3rem;
    --line-height-5xl: 1;

    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    --spacing-3xl: 6rem;

    --radius-sm: 0.125rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  }

  /*
    暗黑模式 (Dark Mode) 的 CSS 变量覆盖
    当 HTML 根元素有 'dark' 类时，这些变量会生效。
  */
  .dark {
    /* Gray Scale (Dark Mode) - 通常是反转亮色模式的灰度 */
    --color-gray-50: 17 24 39; /* gray-900 */
    --color-gray-100: 31 41 55; /* gray-800 */
    --color-gray-200: 55 65 81; /* gray-700 */
    --color-gray-300: 75 85 99; /* gray-600 */
    --color-gray-400: 107 114 128; /* gray-500 */
    --color-gray-500: 156 163 175; /* gray-400 */
    --color-gray-600: 209 213 219; /* gray-300 */
    --color-gray-700: 229 231 235; /* gray-200 */
    --color-gray-800: 243 244 246; /* gray-100 */
    --color-gray-900: 249 250 251; /* gray-50 */
    --color-gray-950: 255 255 255; /* white */

    /* Semantic Colors (Dark Mode) - 调整为适合暗色背景的颜色 */
    --color-success-DEFAULT: 52 211 153; /* green-400 */
    --color-success-light: 20 83 45; /* green-900 */
    --color-success-dark: 16 185 129; /* green-500 */

    --color-warning-DEFAULT: 251 191 36; /* amber-400 */
    --color-warning-light: 120 53 15; /* amber-900 */
    --color-warning-dark: 245 158 11; /* amber-500 */

    --color-error-DEFAULT: 248 113 113; /* red-400 */
    --color-error-light: 127 29 29; /* red-900 */
    --color-error-dark: 239 68 68; /* red-500 */

    --color-info-DEFAULT: 96 165 250; /* blue-400 */
    --color-info-light: 23 37 84; /* blue-950 */
    --color-info-dark: 59 130 246; /* blue-500 */

    /* 暗黑模式下的阴影通常需要更深或更不透明 */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.25);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.3), 0 8px 10px -6px rgb(0 0 0 / 0.3);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.5);
  }

  /*
    主题切换的 CSS 变量覆盖
    当 HTML 根元素有 data-theme="[theme-name]" 属性时，这些变量会生效。
    这里我们定义了 'green' 和 'purple' 主题。
  */
  [data-theme="green"] {
    --color-primary-50: 240 253 244; /* green-50 */
    --color-primary-100: 220 252 231; /* green-100 */
    --color-primary-200: 187 247 208; /* green-200 */
    --color-primary-300: 134 239 172; /* green-300 */
    --color-primary-400: 74 222 128; /* green-400 */
    --color-primary-500: 34 197 94; /* green-500 */
    --color-primary-600: 22 163 74; /* green-600 */
    --color-primary-700: 21 128 61; /* green-700 */
    --color-primary-800: 22 101 52; /* green-800 */
    --color-primary-900: 20 83 45; /* green-900 */
    --color-primary-950: 5 46 22; /* green-950 */
  }

  [data-theme="purple"] {
    --color-primary-50: 250 245 255; /* purple-50 */
    --color-primary-100: 243 232 255; /* purple-100 */
    --color-primary-200: 233 213 255; /* purple-200 */
    --color-primary-300: 216 180 254; /* purple-300 */
    --color-primary-400: 192 132 252; /* purple-400 */
    --color-primary-500: 168 85 247; /* purple-500 */
    --color-primary-600: 147 51 234; /* purple-600 */
    --color-primary-700: 126 34 206; /* purple-700 */
    --color-primary-800: 107 33 168; /* purple-800 */
    --color-primary-900: 88 28 135; /* purple-900 */
    --color-primary-950: 59 7 100; /* purple-950 */
  }

  /*
    全局基础样式重置 (可选，但推荐)
    这里可以添加一些全局的 CSS 变量，或者对 HTML 元素进行一些基础的重置。
    例如，设置默认的字体颜色和背景色，以确保在没有主题提供者的情况下也有基本样式。
  */
  html {
    /* 默认的文本和背景颜色，用于没有主题提供者时的回退 */
    color: rgb(var(--color-gray-900));
    background-color: rgb(var(--color-gray-50));
    transition:
      color 0.3s ease,
      background-color 0.3s ease; /* 平滑过渡 */
  }

  .dark html {
    color: rgb(var(--color-gray-50));
    background-color: rgb(var(--color-gray-900));
  }

  body {
    font-family: var(--font-family-sans); /* 使用 CSS 变量定义字体 */
  }
}
